<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
    <!-- 表单 -->
    <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="130px">
      <div class="dataInfo">
        <p>
          <span>企业信息</span>
        </p>
        <el-row>
          <el-col :span="10">
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="dataForm.companyName" placeholder="请输入公司名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="法定代表人">
              <el-input
                v-model="dataForm.representative"
                placeholder="请输入公司法人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="公司类型" prop="businessTypeId">
              <el-select
                v-model="dataForm.businessTypeId"
                placeholder="请选择公司类型"
                clearable
                filterable
                style="width:100%"
              >
                <el-option
                  v-for="item in companyTypeList"
                  :key="item.businessTypeId"
                  :label="item.companyTypeName"
                  :value="item.businessTypeId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="公司地址" prop="companyAddress">
              <el-input v-model="dataForm.companyAddress" placeholder="请输入公司地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- v-if="type == 'new'" -->
      <div class="dataInfo">
        <p>
          <span>设置账号信息</span>
        </p>
        <el-row>
          <el-col :span="10">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="登录账号" prop="userName">
              <el-input v-model="dataForm.userName" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type =='new'">
          <el-col :span="10">
            <el-form-item label="密码" prop="password">
              <el-input v-model="dataForm.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="再次输入密码" prop="passwordTry">
              <el-input v-model="dataForm.passwordTry" show-password placeholder="请再次输入密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="账号类型" prop="rid">
              <el-select v-model="dataForm.rid" placeholder="请选择账号类型"
              style="width:100%">
                <el-option
                  v-for="item in accountTypeList"
                  :key="item.rid"
                  :label="item.nameZh"
                  :value="item.rid"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="type !=='info'">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getCompanyType, getRole } from '@/api/base'
import { addCompanyInfo, updateCompanyInfo, getCompanyById } from '@/api/other'
export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      type: '',
      dataForm: {
        businessTypeId: '', //公司类型id
        companyName: '',
        representative: '', // 法定代表人
        companyAddress: '',
        userName: '', // 登录账号
        password: '',
        passwordTry: '',
        name: '', // 用户名
        id: '', //公司id
        rid: '', // 账号类型id
      },
      dataRules: {
        companyName: [
          { required: true, message: '请输入公司', trigger: 'blur' },
        ],
        // representative: [
        //   { required: true, message: '请输入公司法人', trigger: 'blur' },
        // ],
        businessTypeId: [{ required: true, message: '请选择公司类型', trigger: 'change' }],
        companyAddress: [
          { required: true, message: '请输入公司地址', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        name: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码的长度在6~15个字符之间',
            trigger: 'blur',
          },
        ],
        passwordTry: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码的长度在6~15个字符之间',
            trigger: 'blur',
          },
        ],
        rid: [{ required: true, message: '请选择账号类型', trigger: 'change' }],
      },
      companyTypeList: [], // 公司类型
      accountTypeList: [], // 账号类型
    }
  },
  mounted() {},
  methods: {
    init(type, item) {
      this.dialogVisible = true
      this.title = type == 'new' ? '新增' : type == 'edit' ? '编辑' : '详情'
      this.type = type
      this.dataForm.id = item ? Number(item.id) : '' //公司id
      if (type == 'new') {
        // 清空数据
        for (var key in this.dataForm) {
          this.dataForm[key] = ''
        }
      } else {
        this.getCompanyByIdReq(item.id)
      }
      this.getCompanyTypeReq() // 公司类型
      this.getRoleReq() // 账号类型
      this.$nextTick((_) => {
        this.$refs['ruleForm'].resetFields()
      })
    },
    getCompanyTypeReq() {
      getCompanyType().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        // 替换id成 businessTypeId  避免与公司id 冲突
        data.forEach(element => {
          element.businessTypeId = element.id
        });
        data.forEach(element => {
          delete element.id
        });
        this.companyTypeList = data
      })
    },
    getRoleReq() {
      getRole().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        // 替换id成 rid  避免与公司id 冲突
        data.forEach(element => {
          element.rid = element.id
        });
        data.forEach(element => {
          delete element.id
        });
        this.accountTypeList = data
      })
    },
    getCompanyByIdReq(id) {
      getCompanyById({ companyId: id }).then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.dataForm = { ...this.dataForm, ...data }
        this.dataForm.businessTypeId = Object.keys(data.companyTypeResponse).length > 0 && data.companyTypeResponse['id'] // 公司类型id
        this.dataForm.rid = Object.keys(data.roleEntity).length > 0 && data.roleEntity['id']  // 账号类型id
      })
    },
    // 提交
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return
        const { password, passwordTry } = this.dataForm
        if (password !== passwordTry)
          return this.$message.info('两次输入密码不一致!')
        let data = {
          businessTypeId: this.dataForm.businessTypeId, //公司类型id
          companyName: this.dataForm.companyName,  // 公司名称
          representative: this.dataForm.representative, // 法定代表人
          companyAddress: this.dataForm.companyAddress,  // 公司地址
          userName: this.dataForm.userName, // 登录账号
          password: this.dataForm.password,  // 密码
          name: this.dataForm.name, // 用户名
          id: this.dataForm.id, // 公司id
          rid: this.dataForm.rid, // 账号类型id
          userId: this.dataForm.userId  // 当前用户的id
        }
        const api =
          this.type == 'new' ? addCompanyInfo(data) : updateCompanyInfo(data)
        api.then((res) => {
          const { code, data, msg } = res
          if (code !== '0000') return this.$message.error(msg)
          this.$emit('updata')
          this.dialogVisible = false
        })
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.dataInfo {
  p {
    padding-left: 10px;
    border-left: 4px solid #0079fe;
    span {
      font-size: 18px;
    }
  }
}
</style>
